<template>
  <view>
    <!-- 顶部导航栏 开始 -->
    <uni-nav-bar  dark :fixed="true" border="false"
                  background-color="#FF7F00"
                  left-icon="bars"
                  right-icon="search"
                  title="首页"
                  :border="false"
                  color="white"
                  statusBar="true"
                  @clickLeft="skipSort" @clickRight="navigateToSearch"/>
    <!-- 顶部导航栏 结束 -->

    <!-- 轮播图 开始 -->
    <view class="background">
      <uni-swiper-dot class="uni-swiper-dot-box" :info="slideshow.rows" :current="current" field="content">
        <swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="true" :circular="true">
          <swiper-item v-for="item in slideshow.rows" :key="item.id" >
            <view class="swiper-item">
              <image :src="item.imgUrl" mode="aspectFill" :draggable="false" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <!-- 轮播图结束 -->

    <!-- 导航 -->

      <uni-row>
          <uni-col :span="6" class="image-box" v-for="(item) in navList">
            <image :src="item.image_src"  class="imag-img"></image>
          </uni-col>
      </uni-row>



    <!--商品列表开始  -->
    <view class="container">
      <view v-for="item in getGoodList" :key="item.proId" class="item">
        <view style="margin: 0 auto">
          <view @click="goToDetail(item.proId)">
            <image :src="item.image" class="item-image"/>
          </view>
          <view class="view-text">
            <text class="item-name" @click="goToDetail(item.proId)">{{item.proName }}</text><br>
          </view>
          <view class="view-price">
            <text class="price-tip">¥</text>
            <text class="item-price">{{item.proPrice|toFixed}}</text>
            <view class="view-icon">
              <uni-tag text="自营" type="error" size="mini"/>
              <text style="margin-left:10px;font-size: 13px;color:grey" @click="goToDetail(item.proId)">20条评论</text>
              <text style="margin-left:28px;font-size: 13px" @click="goToProduct">看相似</text>
            </view>
          </view>
        </view>
      </view>

    </view>
    <uni-load-more v-if="isLoad" :status="loadingType"></uni-load-more>
    <view v-if="!isLoad" style="text-align: center; margin-top: 20rpx; margin-bottom: 20rpx">
      <text>没有数据了</text>
    </view>
  </view>
  <!-- 商品列表结束   -->
</template>

<script>
  import {listAll1, slideshow} from '@/api/product/product'
  import UniIcons from "../uni_modules/uni-icons/components/uni-icons/uni-icons";
  import UniRow from "../uni_modules/uni-row/components/uni-row/uni-row";
  import UniCol from "../uni_modules/uni-row/components/uni-col/uni-col";
  import uniLoadMore from '../components/uni-load-more/uni-load-more';

export default {
  components: {UniCol, UniRow, UniIcons, uniLoadMore},
  data() {
    return {
      loadingType: 'more', //加载更多状态
      isLoad: true,

      current: 0,
      swiperDotIndex: 0,
      slideshow: [],// 存储从后台获取的轮播图数据
      productImg:{},
      mode: 'round',
      getGoodList: [],
      keyword: '',
      results: [],
      //导航条
      navList: [],
      status: '',
      page: 1,
      pageSize:10
    }
  },
  onShow() {
    this.isLoad = true;
    this.page = 1;
    this.getGoodList = [];
    this.loadData();
  },
  onLoad(){
    this.loadData();
    //调用getNavList方法
    this.getNavList();
  },
  //加载更多
  onReachBottom(){
    if (this.isLoad) {
      setTimeout(()=>{
        this.page = this.page + 1;
        this.loadData()
      }, 500)

    }
  },
  methods: {
    /*获取商品列表数据*/
    async loadData(){
      if (this.page === 1) {
        this.productImg.productId = 0;//获取轮播图
        this.slideshow = await slideshow(this.productImg);
        let g =await listAll1()
        this.getGoodList = g.rows
      } else {
        let a = await listAll1({pageNum: this.page})
        console.info(a.rows.length)
        if (a.rows.length<this.pageSize) {
          this.isLoad = false;
        }
        if (a.rows.total===this.pageSize*this.page) {
          this.isLoad = false;
        }
        a.rows.forEach(o=>{
          this.getGoodList.push(o)
        })
      }
    },

    async loadMore() {
      // 加载更多的逻辑
      // 根据具体业务需求，加载更多的数据
      // 更新 status 属性的值，控制加载更多的状态
      this.status = 'loading';

      // 模拟异步加载更多数据
      setTimeout(async () => {
        // 加载更多的数据
        const moreData = await listAll1(this.page + 1, this.pageSize);
        // 判断是否还有更多数据
        if (moreData.length > 0) {
          // 追加数据到商品列表
          this.getGoodList = this.getGoodList.concat(moreData);
          // 更新页码
          this.page++;
          // 更新 status 属性的值，设置为 ''
          this.status = '';
        } else {
          // 没有更多数据
          // 更新 status 属性的值，设置为 'nomore'
          this.status = 'nomore';
        }

        // 加载失败
        // 更新 status 属性的值，设置为 'error'
        this.status = 'error';
      }, 2000);
    },

    //看相似
    goToProduct(){
      uni.navigateTo({
        url: '/pages/product/prodList/index'
      });
    },
    //通过uni.request方法向远程服务器发送请求，获取导航条数据。在请求成功后，将获取到的数据中的message字段赋值给getNavList数组，从而实现导航条的展示。
    getNavList() {
      uni.request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
        success: (res) => {
          console.log(res);
          this.navList = res.data.message;
        }
      })
    },

    change(e) {
      this.current = e.detail.current
    },
    goToDetail(proId) {
      // 在这里进行页面跳转和获取对应商品的数据
      // 例如使用路由进行页面跳转
      uni.navigateTo({ url: '/pages/product/details/index?proId='+proId});  // 这个路由点击去后有左上角的返回键
      // this.$tab.redirectTo('/pages/product/details/index?proId='+proId) // 这个路由点击进入后没有返回的地方
      // this.$router.push({ path: '/pages/product/details/index', query: { proId: proId } });  // 这个路由貌似在手机上不生效，点击会报错
      // 在跳转后的详情页中可以通过获取 proId 来获取对应商品的数据
    },

    /*左上角分类按钮跳转*/
    skipSort(){
      uni.switchTab({
        url: '/pages/product/categories/index'
      });
    },
    /*右上角搜索按钮跳转*/
    navigateToSearch(){
      uni.navigateTo({
        url: '/pages/product/search/index'
      });
    },
  },
  filters:{
    toFixed(num){
      return Number(num).toFixed(2)
    }
  }
}
</script>

<style>
/* 搜索框容器样式 */
.container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40rpx;
}

.item {
  flex: 0 0 50%;
  padding: 6rpx;
  margin-top: 20rpx;
  box-sizing: border-box;
}

.item-image {
  width: 100%;
  height: 400rpx;
  margin-left: 16rpx;
}

.view-text{
  width: 340rpx;
  margin-left: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20rpx;
}
.view-price{
  width: 340rpx;
  height: 110rpx;
  margin-left: 16rpx;
  margin-top: 6rpx;
}
.price-tip{
  color: red;
  margin-left: 8upx;
}
.item-price {
  font-size: 50rpx;
  color: red;

}

.view-icon{
  width: 340rpx;
  height: 40rpx;
  margin-top: 10rpx;
  line-height: 40rpx;
}

.item-image {
  width: 340rpx;
  height: 340rpx;
  /*border: 2rpx solid dodgerblue;*/
  border-radius: 20rpx;
}


@media screen and (min-width: 350px) {
  .uni-swiper-dot-box {
    width: 90%;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    border-radius: 30rpx;
  }
}

.swiper-box {
  height: 300rpx;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}
.background{
  width: 100%;
  height: 300rpx;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(50%,#ADEAEA));
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%
}



.index-cate {
  width: 100%;
  display: flex;
}
.image-box {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.imag-img {
  width: 180rpx;
  height: 180rpx;
  margin-right: 8rpx;
}




</style>